<template>
  <div>
      <h1>泛型在接口和类的使用</h1>

  </div>
</template>


<script setup lang="ts">
  // 1 接口使用泛型  Icar<T,U>{}
  import {reactive} from 'vue'
   interface Icar<T,U>{
     name:T,
     age:U,
     say(str:T):void
   }
  let tank:Icar<string,number>={
    name:"坦克700",
    age:10,
    say(str:string){
    }
  }
  let benchi:Icar<number,boolean>={
    name:212,
    age:true,
    say(str:number){ 
    }
  }




  // !!!!  reactive的ts写法
  // reactive 用interface 和type来约束
  interface Iperson{
    name:string,
    age:number,
    eat(str:string):void
  }


 let state=reactive<Iperson>({
   name:"张家瑞",
   age:23,
   eat(str:string){
   }
 })
 
 type iPlane={
  name:string,
  color:string,
  fly():void
 }
let plane=reactive<iPlane>({
   name:"湾流",
   color:"red",
   fly(){
   }
})
// 泛型 在类中的使用
class City<T,U>{
    public  name:T
    private age:U
    constructor(name:T,age:U){
      this.name=name;
      this.age=age
    }
    say(str:T):T{

      return str
    }
}

let langfang=new City<string,number>("廊坊",10);
let beijing=new City<string,string>("北京","red");








</script>